<template>
  <div class="book-page">
    <!-- book header -->
    <div class="header">
      <div class="header-top">
        <div class="logo-l"></div>
        <div class="icon-r">
          <van-icon
            name="shopping-cart-o"
            @click="tocart()"
            color="#fff"
            size="20"
          />
          <van-icon name="search" color="#fff" size="20" @click="tosearch()" />
        </div>
      </div>
      <div class="tab-wrap">
        <div class="tab-list">
          <span
            class="tab-item"
            :class="tab == 'all' ? 'active' : ''"
            @click="tab = 'all',page = 1"
            >所有</span
          >
          <span
            class="tab-item"
            :class="tab == 'book' ? 'active' : ''"
            @click="tab = 'book',page = 1"
            >纸质书</span
          >
          <span
            class="tab-item"
            :class="tab == 'ebook' ? 'active' : ''"
            @click="tab = 'ebook',page = 1"
            >电子书</span
          >
          <span
            class="tab-item"
            :class="tab == 'fav' ? 'active' : ''"
            @click="tab = 'fav',page = 1"
            >我的收藏</span
          >
          <span
            class="tab-item"
            :class="tab == 'tejia' ? 'active' : ''"
            @click="tab = 'tejia',page = 1"
            >每周特价</span
          >
          <span
            class="tab-item"
            :class="tab == 'Presale' ? 'active' : ''"
            @click="tab = 'Presale',page = 1"
            >预售</span
          >
          <span
            class="tab-item"
            :class="tab == 'free' ? 'active' : ''"
            @click="tab = 'free',page = 1"
            >免费</span
          >
          <span
            class="tab-item"
            :class="tab == 'translator' ? 'active' : ''"
            @click="tab = 'translator',page = 1"
            >诚征译者</span
          >
          <span
            class="tab-item"
            :class="tab == 'gift' ? 'active' : ''"
            @click="tab = 'gift',page = 1"
            >可兑换</span
          >
        </div>
      </div>
    </div>
    <!-- book body -->
    <div v-if="!loading" class="body">
      <!-- body-top -->
      <div class="body-top">
        <div class="book-sorts">
          <div
            class="book-sort-item"
            :class="sort == 'new' ? 'active' : ''"
            @click="sort = 'new',page = 1"
          >
            最新
          </div>
          <div
            class="book-sort-item"
            :class="sort == 'hot' ? 'active' : ''"
            @click="sort = 'hot',page = 1"
          >
            热门
          </div>
          <div
            class="book-sort-item"
            :class="sort == 'vote' ? 'active' : ''"
            @click="sort = 'vote',page = 1"
          >
            推荐
          </div>
        </div>
        <p class="more-sort" @click="showPopup">更多筛选</p>
      </div>
      <!-- tags-wrapper -->
      <div class="tags-wrapper" v-show="category">
        <div class="tag-item">
          <span>{{ keyWord }}</span>
          <van-icon name="cross" @click="init" />
        </div>
      </div>
      <!-- 主体 -->
      <div class="body-container">
        <van-list
          v-model="waiting"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- BookItemA -->
          <BookItemA
            v-for="b in bookListData"
            :key="b.id"
            :book-name="b.name"
            :book-authors="b.authors"
            :cover-key="b.coverKey"
            :id="b.id"
          />
        </van-list>
      </div>
      <!-- Popup -->
      <van-popup v-model="show" position="bottom">
        <van-cascader
          v-model="category"
          title="更多筛选"
          :options="options"
          :field-names="fieldNames"
          active-color="#2c59b7"
          @close="toMore"
        />
      </van-popup>
    </div>
    <div v-if="loading" class="loading">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import { BookPageAPI, BookMoreAPI } from "../apis";
import BookItemA from "@/components/BookItem-A.vue";
export default {
  data() {
    return {
      // 加载中
      loading: true,
      // 图书列表
      bookListData: [],
      // 分类列表
      options: [],
      // 修改数据名
      fieldNames: {
        text: "name",
        value: "id",
        children: "children",
      },
      // 请求关键字
      category: "",
      sort: "new",
      page: 1,
      tab: "ebook",
      // showPopup
      show: false,
      // 下拉加载
      waiting: false,
      finished: false,
    };
  },

  watch: {
    // 监视sort的变化
    sort(current, old) {
      if (current != old) {
        this.getBookPage();
      }
    },
    // 监视tab的变化
    tab(current, old) {
      if (current != old) {
        this.getBookPage();
      }
    },
  },
  computed: {
    // id 匹配 标签名
    keyWord() {
      let b = [];
      this.options.forEach((item) => {
        b = [...b, ...item.children];
      });

      let c = [];
      b.forEach((item) => {
        if (item.children.length) {
          c = [...c, ...item.children];
        }
      });

      c = [...this.options, ...b, ...c];
      let a = c.filter((item) => {
        return item.id == this.category;
      })[0]?.name;

      return a;
    },
  },
  mounted() {
    this.loading = true;
    this.getBookPage();
    this.getBookMore();
    this.$emit("setactive", 1);
  },

  methods: {
    // 获取图书页数据
    async getBookPage() {
      let { data } = await this.$http(
        BookPageAPI(this.category, this.sort, this.page, this.tab),
        {
          headers: {
            Authorization:
              "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
          },
        }
      );
      this.bookListData = data.bookItems;
      this.$nextTick(() => {
        this.loading = false;
      });
    },
    // 获取更多数据
    async getBookMore() {
      let { data } = await this.$http(BookMoreAPI);
      this.options = data;
      console.log(data);
    },
    // to 购物车
    tocart() {
      this.$router.push({ path: "/cart" });
    },
    // to 搜索框
    tosearch() {
      this.$router.push({ path: "/search" });
    },
    // 展示弹窗
    showPopup() {
      this.show = true;
    },
    // 更多
    toMore() {
      this.getBookPage();
      this.show = false;
    },
    // 初始化
    init() {
      this.category = "";
      this.sort = "new";
      this.page = 1;
      this.tab = "ebook";
      this.getBookPage();
    },
    // 下拉加载
    async onLoad() {
      this.page++;
      let { data } = await this.$http(
        BookPageAPI(this.category, this.sort, this.page, this.tab),
        {
          headers: {
            Authorization:
              "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
          },
        }
      );
      if (data.pagination.totalItemCount <= this.page * 20 + 20) {
        this.finished = true;
      }
      this.bookListData = [...this.bookListData, ...data.bookItems];
      this.waiting = false;
    },
  },
  components: {
    BookItemA,
  },
};
</script>

<style lang="scss" scoped>
.book-page {
  width: 100vw;

  .header {
    background-color: var(--theme-blue);

    .header-top {
      padding: 20px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo-l {
        background: url("../assets/logo.png") no-repeat 0 0;
        background-size: 180px 35px;
        width: 180px;
        height: 35px;
      }
      .icon-r {
        padding: 10px 0 0 10px;
        .van-icon-shopping-cart-o {
          margin-right: 20px;
        }
      }
    }
    .tab-wrap {
      padding: 0 0 16px 0;
      overflow-x: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .tab-list {
        display: flex;
        width: 750px;
        .tab-item {
          color: var(--tag-font-white);
          font-size: 14px;
          line-height: 26px;
          margin: 0 20px 0 15px;
          &.active {
            font-size: 20px;
            color: #fff;
            font-weight: bold;
          }
        }
      }
    }
  }
  .body {
    .body-top {
      display: flex;
      justify-content: space-between;
      padding: 15px 15px 0;
      border-bottom: 2px solid var(--more-bg-white);
      border-radius: 5px;
      .book-sorts {
        display: flex;
        .book-sort-item {
          color: #000;
          font-size: 14px;
          margin-right: 20px;
          padding-bottom: 10px;
          &.active {
            font-weight: bolder;
            border-bottom: 2px solid var(--theme-blue);
          }
        }
      }
      .more-sort {
        color: var(--theme-blue);
        font-size: 14px;
      }
    }
    .tags-wrapper {
      padding: 15px 15px 0;
      margin-bottom: 5px;
      div.tag-item {
        display: inline-block;
        color: var(--theme-blue);
        background-color: #ecf2ff;
        padding: 5px 10px;
        margin-right: 15px;
        border-radius: 5px;
        span {
          margin-right: 5px;
        }
      }
    }
    .body-container {
      .van-list {
        margin-top: 5px;
        padding: 0 15px;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 65px;
      }
    }
    .van-popup {
      height: 50vh;
      .van-cascader {
        padding-top: 20px;
      }
    }
  }
}
</style>
